<template>
    <div class='bottom'>
      <div class="b-left">
        <div class="iconfont">&#xe6e3;</div>
        <p>店铺</p>
      </div>
      <div class="b-right">
        <span class="jr">加入购物车</span>
        <span class="kt">开团提醒</span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'DetailBottom'
}
</script>

<style lang='stylus' scoped>
.bottom
  border-top 1px solid #D3D3D3
  position fixed
  bottom 0
  width 100%
  height .62rem
  display flex
  padding .14rem
  background #fff
  .b-left
    width 36%
    color #A9A9A9
    font-size .16rem
    .iconfont
      color #FF0000
  .b-right
    display flex
    color #fff
    text-align center
    line-height .58rem
    font-size .24rem
    .jr
      background-image: linear-gradient(left, rgba(255,215,0, .4), rgba(255,215,0,1))
      width 2.14rem
      height .58rem
      border-bottom-left-radius .4rem
      border-top-left-radius .4rem
    .kt
      background-image: linear-gradient(left, rgba(34,139,34, 1), rgba(34,139,34,.6))
      width 2.14rem
      height .58rem
      border-bottom-right-radius .4rem
      border-top-right-radius .4rem
</style>
